<template>
  <div class="app-detail-list" :style="{'background':bgColor}">
    <div v-show="list_flag=='news'">
      <!-- <app-detail-title text="热门资讯"></app-detail-title> -->
      <div class="list-body">
        <a
        v-for="item of 4"
        href="" target="_blank" class="list-item">
          <div class="item-img">
            <img src="" alt="">
          </div>
          <div class="item-word">
            <h1 class="title word-two-line" >大专生毕业后还能不能湖南专升本？</h1>
            <p class="desc WordJustOneLine">A：推荐使用A：推荐使用A：推荐使用A：推荐使用A：推荐使用</p>
          </div>
        </a>
      </div>
    </div>

    <div v-show="list_flag=='questions'">
      <!-- <app-detail-title text="今日热议"></app-detail-title> -->
      <div class="list-body">
        <a
        v-for="item of 4"
        href="" target="_blank" class="list-item">
          <div class="item-img">
            <img src="" alt="">
          </div>
          <div class="item-word">
            <h1 class="title word-two-line">大专生毕业后还能不能湖南专升本？</h1>
            <p class="desc WordJustOneLine">A：推荐使用A：推荐使用A：推荐使用A：推荐使用A：推荐使用</p>
          </div>
        </a>
      </div>
    </div>


  </div>
</template>

<script>
import appDetailTitle from './app-detail-title.vue'
export default{
  components:{
    appDetailTitle
  },
  props:{
    list_flag:{
      type:String,
      default:'news'
    },
    bgColor:{
      type:String,
      default:'#ffffff'
    },
    color:{
      type:String,
      default:'#221815'
    },
  },
  async asyncData({app}){
    console.log('测试组件是否拥有asyncData 函数')
  },
}
</script>

<style scoped="scoped" lang="scss">
.app-detail-list{
  width: 288px;
  background-color: white;
  .list-body{
    padding:10px 15px ;
    .list-item{
      display: block;
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      &:hover{
        .item-word{
          .title{
            color: $sec_color;
          }
        }
      }
      .item-img{
        width: 78px;
        height: 54px;
        background-color: gray;
        border-radius: 5px;
        overflow: hidden;
      }
      .item-word{
        width: calc(100% - 78px);
        padding-left: 10px;
        box-sizing: border-box;
        .title{
          font-size: 14px;
          color: $text1_color;
        }
        .desc{
          font-size: 12px;
          color: #9fa0a0;
        }
      }
    }
  }
}
</style>
